<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
import { apiaction ,getApi} from "@/api/unicorn";
import { getToken } from '@/utils/auth'
import Cookies from "js-cookie";
export default  {
  name:  'App',

  created() {      
    // 因为我的页面有缓存机制，用户下次有可能直接打开某个登录后才能访问的页面 比如F5刷新了某个页面 需要重连
    // 又比如后端服务器因为什么原因突然中断了一下 也需要重新连接WebSocket
    // 每3秒检测一次websocket连接状态 未连接 则尝试连接 尽量保证网站启动的时候 WebSocket都能正常长连接
    if (getToken()) {
      setInterval(this.WebSocket_StatusCheck, 1500)
      setInterval(this.api, 3000)
      this.getUser();   
    }
  },
  methods: {
      getUser() {
          getApi().then(response => {
            this.user = response;
          });
      },
      api(){
        apiaction(this.user).then(response => {
                if(response.data>=this.version){
                        Cookies.set("apiaction","1")
                    }else{
                        Cookies.set("apiaction","0")
                    }
           })

      },
    // 1、WebSocket连接状态检测：
      WebSocket_StatusCheck() {
        if (!this.$WebSocket.WebSocketHandle || this.$WebSocket.WebSocketHandle.readyState !== 1) {
          console.log('Websocket连接中断，尝试重新连接:')
          this.WebSocketINI()
        }

        
           

      },
          
      // 2、WebSocket初始化：
      async WebSocketINI() {
        // 1、浏览器是否支持WebSocket检测
        if (!('WebSocket' in window)) {
          console.log('您的浏览器不支持WebSocket!')
          return
        }

        const tmpWebsocketSrverAddress = "ws://127.0.0.1:9820"
        
        // 3、创建Websocket连接
        const tmpWebsocket = new WebSocket(tmpWebsocketSrverAddress)
        
        // 4、全局保存WebSocket操作句柄：main.js 全局引用
        this.$WebSocket.WebsocketINI(tmpWebsocket)
        
        // 5、WebSocket连接成功提示
        tmpWebsocket.onopen = function(e) {
          console.log('webcoket连接成功')
        }

      //6、连接失败提示
        tmpWebsocket.onclose = function(e) {
          console.log('webcoket连接关闭：', e)
        }
      },
      metaInfo() {
          return {
              title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
              titleTemplate: title => {
                  return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
              }
          }
      }
    }
}
</script>
